<template>
  <el-drawer
    :title="title"
    :visible.sync="dialogVisible"
    width="20%"
    :close-on-click-modal="false"
    :before-close="handleClose">
    <el-form :model="appVersionForm" ref="appVersionForm" :rules="rules" label-width="100px">
      <el-form-item label="名称:" prop="name">
        <el-select v-model="appVersionForm.name" placeholder="请选择" style="width: 100%;">
          <el-option
            v-for="(item, index) in this.$config.APP_NAME"
            :key="Number(index)"
            :label="item"
            :value="Number(index)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型:" prop="appType">
        <el-select v-model="appVersionForm.appType" placeholder="请选择" style="width: 100%;">
          <el-option
            v-for="(item, index) in this.$config.APP_TYPE"
            :key="Number(index)"
            :label="item"
            :value="Number(index)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="版本号:" prop="version">
        <el-input v-model="appVersionForm.version" placeholder="请输入版本号"></el-input>
      </el-form-item>
      <el-form-item label="强制更新:">
        <el-select v-model="appVersionForm.isForce" placeholder="请选择" style="width: 100%;">
          <el-option
            v-for="(item, index) in this.$config.YES_NO"
            :key="Number(index)"
            :label="item"
            :value="Number(index)">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="更新内容:" prop="version">
        <el-input type="textarea" rows="4" v-model="appVersionForm.remark" placeholder="请输入更新内容"></el-input>
      </el-form-item>
      <el-form-item label="文件大小:">
        <el-input v-model.number="appVersionForm.fileSize" readonly="readonly" placeholder="">
          <i slot="suffix" style="color: black;">MB</i>
        </el-input>
      </el-form-item>
      <el-form-item label="安装包:" prop="downloadUrl">
        <UploadFile
        :limit="1"
        :uploadValue.sync="uploadFiles"
        :uploadTip.sync="uploadTip"
        :uploadSize.sync="appVersionForm.fileSize"
        @uploadChange="uploadFileChange"/>
      </el-form-item>
    </el-form>

    <span class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="confirm">确 定</el-button>
    </span>
  </el-drawer>
</template>
<script>
import UploadFile from '@/components/UploadFile/index.vue'

import { appVersionDetail, appVersionAdd, appVersionEdit } from '@/api/app-version'

export default {
  name: 'AddAppVersion',
  components: {
    UploadFile
  },
  props: {
    rowId:{
      type: Number,
      default: ()=> null
    },
    title: {
      type: String,
      default: ()=> null
    },
    showDialog: {
      type: Boolean,
      default: ()=> false
    }
  },
  computed: {
    dialogVisible: {
      get(){
        return this.showDialog
      }
    }
  },
  data() {
    return {
      appVersionForm: null,
      initForm: {
        name: void 0,
        version: '',
        appType: void 0,
        downloadUrl: '',
        remark: '',
        isForce: 0,
        fileSize: 0,
      },
      rules: {
        name: [{ required: true, message: '请选择应用名称', trigger: 'blur, change' }],
        version: [{ required: true, message: '请输入版本号', trigger: 'blur, change' }],
        appType: [{ required: true, message: '请选择应用类型', trigger: 'blur, change' }],
        downloadUrl: [{ required: true, message: '请上传文件', trigger: 'blur, change' }],
        remark: [{ required: true, message: '请输入更新内容', trigger: 'blur, change' }]
      },
      loading: false,
      uploadTip: null,
      uploadFiles: []
    }
  },
  watch: {
    rowId: {
      handler(rowId) {
        if(!rowId || rowId <= 0) return
        this.loadAppVersionDetailData(rowId)
        this.uploadTip = '上传的文件会覆盖原来的文件'
      }
    }
  },
  created(){
    this.appVersionForm = { ...this.initForm }
  },
  methods: {
    // 监听文件上传、删除事件
    uploadFileChange() {
      if(!this.uploadFiles || this.uploadFiles.length <= 0){
        this.appVersionForm.downloadUrl = ''
      }else {
        this.appVersionForm.downloadUrl = this.uploadFiles[0]
      }
    },

    // 加载详情
    async loadAppVersionDetailData(rowId) {
      const res = await appVersionDetail(rowId)
      this.appVersionForm = { ...res.data }
      this.appVersionForm.fileSize = 0
    },

    // 提交数据
    confirm(){
      this.$refs.appVersionForm.validate(async (valid) => {
        if(valid){
          try{
            this.loading = true
            if(!this.rowId){
              await appVersionAdd(this.appVersionForm)
            this.handleClose()
            }else {
              await appVersionEdit(this.appVersionForm)
              this.handleClose()
            }
            this.$emit('reloadData')
          }catch(e){
            this.loading = false
          }
        }else {
          console.log('error submit!!');
          this.loading = false
          return false;
        }
      });
    },

    // 关闭弹窗
    handleClose() {
      this.$emit('update:showDialog', false)
      this.$emit('update:rowId', null)
      this.$emit('update:title', null)
      this.loading = false
      this.uploadFiles = []
      this.appVersionForm = { ...this.initForm }
      this.$refs.appVersionForm.resetFields()
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/drawer-page.scss'
</style>